<template>
  <div class="body">
    <el-table
      :data="publish"
      height="100%"
      border
      stripe
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column prop="goodid" sortable label="商品编号" fit>
      </el-table-column>
      <el-table-column prop="name" sortable label="商品" fit> </el-table-column>
      <el-table-column prop="price" sortable label="价格" fit>
      </el-table-column>
      <el-table-column prop="num" sortable label="数量" fit> </el-table-column>
      <el-table-column prop="date" sortable label="发布时间" fit>
      </el-table-column>
      <el-table-column width="210"
        ><template slot="header">
          <el-button
            type="primary"
            @click="add = true"
            icon="el-icon-circle-plus-outline"
            >新发布</el-button
          > </template
        ><template slot-scope="scope">
          <el-button @click="watchPublish(scope.row)" type="text" size="medium"
            >查看详情</el-button
          >
          <el-button @click="editPublish(scope.row)" type="text" size="medium"
            >修改</el-button
          >
          <el-popconfirm
            title="请确认删除此发布"
            @confirm="deletePublish(scope.row)"
          >
            <el-button
              slot="reference"
              type="text"
              size="medium"
              style="margin-left: 10px"
              >删除</el-button
            >
          </el-popconfirm>
        </template></el-table-column
      >
    </el-table>
    <el-dialog title="修改发布" :visible.sync="edit">
      <el-form :model="editForm">
        <el-form-item label="商品名字"
          ><el-input v-model="editForm.name"></el-input
        ></el-form-item>
        <el-form-item>
          <el-upload
            accept="image/jpeg,image/jpg,image/png,image/svg"
            :limit="1"
            :action="''"
            :with-credentials="true"
            :http-request="upimgedit"
          >
            <el-button size="small" type="primary"
              >点击修改图片</el-button
            ></el-upload
          >
        </el-form-item>
        <el-form-item label="商品分类"
          ><el-select v-model="editForm.catalog" placeholder="请选择商品类别">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option></el-select
        ></el-form-item>
        <el-form-item label="商品价格"
          ><el-input v-model="editForm.price"></el-input
        ></el-form-item>
        <el-form-item label="商品数量">
          <el-input-number v-model="editForm.num" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="商品简介"
          ><el-input v-model="editForm.introduction" type="textarea"></el-input
        ></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="edit = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确定修改</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新建发布" :visible.sync="add">
      <el-form :model="addForm">
        <el-form-item label="商品名"
          ><el-input v-model="addForm.name"></el-input
        ></el-form-item>
        <el-form-item>
          <el-upload
            accept="image/jpeg,image/jpg,image/png,image/svg"
            :limit="1"
            :action="''"
            :with-credentials="true"
            :http-request="upimgadd"
          >
            <el-button size="small" type="primary"
              >点击上传图片</el-button
            ></el-upload
          >
        </el-form-item>
        <el-form-item label="商品分类"
          ><el-select v-model="addForm.catalog" placeholder="请选择商品类别">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option></el-select
        ></el-form-item>
        <el-form-item label="商品价格"
          ><el-input v-model="addForm.price"></el-input
        ></el-form-item>
        <el-form-item label="商品数量">
          <el-input-number v-model="addForm.num" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="商品简介"
          ><el-input v-model="addForm.introduction" type="textarea"></el-input
        ></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="add = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确定发布</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.$http.get("my/publish").then((res) => {
      if (res.data.success === true) {
        var keymap = {
          launchTime: "date",
          inventory: "num",
          gid: "goodid",
        };
        for (var i = 0; i < res.data.publishList.length; i++) {
          var obj = res.data.publishList[i];
          for (var key in obj) {
            var newkey = keymap[key];
            if (newkey) {
              obj[newkey] = obj[key];
              delete obj[key];
            }
          }
        }
        for (var i = 0; i < res.data.publishList.length; i++) {
          res.data.publishList[i].date = this.convertTime(
            parseInt(res.data.publishList[i].date)
          );
        }
        this.publish = res.data.publishList;
      } else {
        this.$message.error("加载失败,请重新加载!");
      }
    });
  },
  data() {
    return {
      edit: false,
      add: false,
      options: [
        { label: "教辅资料", value: 2 },
        { label: "生活用品", value: 3 },
        { label: "电子产品", value: 4 },
        { label: "网络资源", value: 5 },
        { label: "其他", value: 6 },
      ],
      publish: [],
      editForm: {
        goodid: "",
        name: "",
        img: "",
        catalog: "",
        price: "",
        num: "",
        introduction: "",
      },
      addForm: {
        name: "",
        img: "",
        catalog: "",
        price: "",
        num: "1",
        introduction: "",
      },
    };
  },
  methods: {
    upimgedit(item) {
      const { file } = item;
      const formdata = new FormData();
      formdata.append("file", file);
      this.$http.post("upload/img/message", formdata).then((res) => {
        if (res.data.success === true) {
          this.$message.success("上传成功!");
          this.editForm.img = "http://8.140.135.252:8080" + res.data.imgUrl;
        } else this.$message.error("上传失败,请稍后重新上传!");
      });
    },
    upimgadd(item) {
      const { file } = item;
      const formdata = new FormData();
      formdata.append("file", file);
      this.$http.post("upload/img/message", formdata).then((res) => {
        if (res.data.success === true) {
          this.$message.success("上传成功!");
          this.addForm.img = "http://8.140.135.252:8080" + res.data.imgUrl;
        } else this.$message.error("上传失败,请稍后重新上传!");
      });
    },
    watchPublish(row) {
      //跳转到详情页
      var good = {};
      this.$http
        .get("viewGoodDetails?gid=" + row.goodid)
        .then((res) => {
          if (res.data.success === true) {
            good = {
              goodid: res.data.gid,
              userid: res.data.uid,
              username: res.data.username,
              name: res.data.name,
              price: res.data.price,
              num: res.data.inventory,
              catalog: res.data.catalog,
              img: res.data.imgDir,
              introduction: res.data.goodsDesc,
            };
            this.$store.commit("setGood", good);
            this.$router.push("Goodinfo");
          } else {
            this.$message.error("加载失败,请稍后再试!");
          }
        })
        .catch((e) => {});
    },
    editPublish(row) {
      this.$http.get("viewGoodDetails?gid=" + row.goodid).then((res) => {
        if (res.data.success === true) {
          this.editForm = {
            goodid: res.data.gid,
            userid: res.data.uid,
            username: res.data.username,
            name: res.data.name,
            price: res.data.price,
            num: res.data.inventory,
            catalog: res.data.catalog,
            img: res.data.imgDir,
            introduction: res.data.goodsDesc,
          };
          this.edit = true;
        } else {
          this.$message.error("加载失败,请稍后再试!");
        }
      });
    },
    deletePublish(index) {
      this.$http.post("deleteGoods", { gid: index.goodid }).then((res) => {
        if (res.data.success === true) {
          this.$message.success(res.data.message);
          this.publish.splice(
            this.publish.findIndex((item) => item.goodid == index.goodid),
            1
          );
        } else {
          this.$message.error(res.data.message);
        }
      });
      //删除请求
    },
    confirmEdit() {
      var good = {
        gid: this.editForm.goodid,
        name: this.editForm.name,
        goodsDesc: this.editForm.introduction,
        price: this.editForm.price,
        inventory: this.editForm.num,
        cat_id: this.editForm.catalog,
        img_dir: this.editForm.img,
      };
      console.log(good);
      this.$http.post("ModifyGoodsInformation", good).then((res) => {
        if (res.data.success === true) {
          this.$message.success("修改成功!");
          this.edit = false;
        } else {
          this.$message.error(res.data.message);
        }
      });
      //上传修改信息
    },
    confirmAdd() {
      var good = {
        name: this.addForm.name,
        imgDir: this.addForm.img,
        goodsDesc: this.addForm.introduction,
        price: this.addForm.price,
        inventory: this.addForm.num,
        cat_id: this.addForm.catalog,
      };
      this.$http.post("addGoods", good).then((res) => {
        console.log(res.data);
        if (res.data.success === true) {
          this.$message.success("添加成功!");
          this.add = false;
        } else {
          this.$message.error("添加失败,请稍后再试!");
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
.body {
  height: 100%;
  width: 100%;
}
/deep/.el-table {
  font-size: 19px;
}
/deep/.el-table .el-button {
  font-size: 19px;
}
/deep/.el-dialog__title {
  line-height: 30px;
  font-size: 30px;
}
/deep/.el-form-item__label {
  font-size: 20px;
}
/deep/.el-input__inner {
  font-size: 18px;
}
/deep/.el-textarea__inner {
  font-size: 18px;
}
/deep/.el-popover {
  font-size: 17px;
}
/deep/.el-button--mini,
.el-button--small {
  font-size: 16px;
}
</style>